<script setup lang="ts">
import HomeNav from './components/home-nav.vue'
import knowLedge from './components/knowledge-card.vue'
import FollowDoctor from './components/FollowDoctor.vue'
import { ref, onMounted } from 'vue'
import type { ActiveType, KnowledgePage, KnowledgeList, KnowledgeParams } from '@/types/consult'
import { getKnowledgePage } from '@/api/consult'
const active = ref<ActiveType>('recommend')
const knowLedgeCardInfo = ref({
  type: active.value,
  current: 1,
  pageSize: 5
})
const knowLedgeCardList = ref<KnowledgeList>([])
const onClickTab = () => {
  knowLedgeCardInfo.value.pageSize = 5
  knowLedgeCardInfo.value.current = 1
  knowLedgeCardInfo.value.type = active.value
  getKnowledges(knowLedgeCardInfo.value)
}
const getKnowledges = (obj: KnowledgeParams) => {
  getKnowledgePage<KnowledgePage>(obj).then((res) => {
    knowLedgeCardList.value.push(...res.data.rows)
    loading.value = false
    // 是否加载完成
    if (knowLedgeCardInfo.value.current >= res.data.pageTotal) {
      // 数据加载完毕
      finished.value = true
    } else {
      knowLedgeCardInfo.value.current++
    }
  })
}
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  getKnowledges(knowLedgeCardInfo.value)
}
onMounted(() => {
  getKnowledges(knowLedgeCardInfo.value)
})
</script>
<template>
  <div class="home-page">
    <div class="home-header">
      <h1>优医</h1>
      <div class="search"><cp-icons name="home-search" class="icons" />搜一搜：疾病/症状/医生/健康知识</div>
    </div>
    <HomeNav></HomeNav>
    <div class="home-banner">
      <van-swipe indicator-color="#fff">
        <van-swipe-item>
          <img src="@/assets/ad.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/ad.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-tabs shrink sticky v-model:active="active" @click-tab="onClickTab">
      <van-tab title="关注" name="like">
        <!-- 推荐未关注的医生 -->
        <FollowDoctor></FollowDoctor>
        <!-- 已关注医生的文章列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <knowLedge v-for="item in knowLedgeCardList" :key="item.id" :items="item"></knowLedge>
        </van-list>
      </van-tab>
      <van-tab title="推荐" name="recommend">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <knowLedge v-for="item in knowLedgeCardList" :key="item.id" :items="item"></knowLedge>
        </van-list>
      </van-tab>
      <van-tab title="减脂" name="fatReduction">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <knowLedge v-for="item in knowLedgeCardList" :key="item.id" :items="item"></knowLedge>
        </van-list>
      </van-tab>
      <van-tab title="饮食" name="food">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <knowLedge v-for="item in knowLedgeCardList" :key="item.id" :items="item"></knowLedge>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<style lang="scss" scoped>
.home-page {
  padding-bottom: 50px;
  .home-header {
    height: 100px;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
    margin-bottom: 10px;
    h1 {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      line-height: 1;
      padding-left: 5px;
    }
    .search {
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%);
      height: 40px;
      width: 80%;
      border-radius: 20px;
      box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: var(--cp-dark);
      font-size: 13px;
      white-space: nowrap;
      .icons {
        font-size: 16px;
        padding-right: 5px;
      }
    }
  }

  .home-banner {
    padding: 10px 15px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
